<template>
	<div class="app-container">
		<el-breadcrumb separator="/" style="padding:10px;padding-bottom:0;">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item><a href="#/monitoringanalysis">监控分析</a></el-breadcrumb-item>
		</el-breadcrumb>
		<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px"
			style="padding: 20px;padding-bottom: 0;">
			<el-row :gutter="10" style="width:100%;">
				<el-col :span="8">
					<el-form-item label="开车日期" prop="driverDate">
						<el-date-picker size="small" v-model="queryParams.driverDate" type="date" placeholder="选择开车日期">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="司机名" prop="driverName" label-width="60px">
						<el-autocomplete class="inline-input" v-model="queryParams.driverName"
							:fetch-suggestions="querySearch" placeholder="请输入司机名" @select="handleSelect" clearable
							size="small" @clear="setBlur()" style="height:30px;line-height: 30px;"></el-autocomplete>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="车次" prop="trainNum" label-width="40px">
						<el-input v-model="queryParams.trainNum" placeholder="请输入车次" clearable size="small"
							@keyup.enter.native="handleQuery" />
					</el-form-item>
					<el-form-item label="司机号" prop="driverNum" label-width="60px">
						<el-input v-model="queryParams.driverNum" placeholder="请输入司机号" clearable size="small"
							@keyup.enter.native="handleQuery" />
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="车型" prop="trainType" label-width="40px">
						<el-input v-model="queryParams.trainType" placeholder="请输入车型" clearable size="small"
							@keyup.enter.native="handleQuery" />
					</el-form-item>
					<el-form-item label="机车号" prop="motorNum" label-width="60px">
						<el-input v-model="queryParams.motorNum" placeholder="请输入机车号" clearable size="small"
							@keyup.enter.native="handleQuery" />
					</el-form-item>
					<!-- <el-form-item label="起点站" prop="originStation" label-width="60px">
            <el-input v-model="queryParams.originStation" placeholder="请输入识别状态" clearable size="small" @keyup.enter.native="handleQuery" />
          </el-form-item> -->
				</el-col>
				<!-- <el-col :span="6"> -->

				<!-- <el-form-item label="终点站" prop="terminus" label-width="60px">
            <el-input v-model="queryParams.terminus" placeholder="请输入识别状态" clearable size="small" @keyup.enter.native="handleQuery" />
          </el-form-item> -->
				<!-- </el-col> -->
			</el-row>
			<el-form-item style="display: flex;justify-content: flex-end;">
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery('queryForm')">重置</el-button>
			</el-form-item>
		</el-form>
		<el-table ref="pageTable" class="loading-area" border :data="dataList" highlight-current-row stripe
			@selection-change="handleSelectionChange" @row-click="rowClick" @cell-dblclick="cellDblclick">
			<el-table-column type="index" width="50"></el-table-column>
			<!-- <el-table-column label="识别状态" align="center" prop="phaseStatus"  /> -->
			<el-table-column label="开车日期" width="120" align="center" prop="driverDate" />
			<el-table-column label="车次" align="center" prop="trainNum" />
			<el-table-column label="车型" align="center" prop="trainType" />
			<el-table-column label="机车号" align="center" prop="motorNum" />
			<el-table-column label="本补" align="center" prop="keHuo" />
			<el-table-column label="计长" align="center" prop="length" />
			<el-table-column label="数据交路" align="center" prop="roadNum" />
			<el-table-column label="司机号" align="center" prop="driverNum" />
			<el-table-column label="司机名" align="center" prop="driverName" />
			<el-table-column label="副司机" align="center" prop="assisDriverNum" />
			<el-table-column label="副司机名" align="center" prop="assisDriverName" />
			<el-table-column label="起点站" align="center" prop="originStation" />
			<el-table-column label="终点站" align="center" prop="terminus" />
			<el-table-column label="分析日期" width="180" align="center" prop="updateTime" />
			<el-table-column label="分析人" align="center" prop="analysisName" />
			<el-table-column label="自动判断分数" width="180" align="center" prop="score" />
			<!-- <el-table-column label="审核人" width="180" align="center" prop="examineName"  /> -->
			<el-table-column label="创建时间" width="180" align="center" prop="createTime" />
			<el-table-column label="分配状态" align="center" prop="allocateStatus">
				<template slot-scope="scope">
					<span>{{ scope.row.allocateStatus==1?'已分配':'未分配' }}</span>
				</template>
			</el-table-column>
			<el-table-column label="分析状态" align="center" prop="analysisStatus">
				<template slot-scope="scope">
					<span>{{ scope.row.analysisStatus==0?'未分析':scope.row.analysisStatus==2?'分析中':'已完成' }}</span>
				</template>
			</el-table-column>
			<el-table-column label="完成进度(单位%)" width="180" align="center" prop="progress" />
		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryParams.pageNum" :page-sizes="[10, 20, 30, 40]" :page-size="queryParams.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
		<div class="footer">
			<div class="analysis_info">
				<span>开车日期:{{info.driverDate}}</span>
				<span>车次:{{info.trainNum}}</span>
				<span>司机: {{info.driverName}}</span>
				<span>副司机:{{info.assisDriverName}}</span>
			</div>
			<el-row class="footer_item">
				<el-col :span="17">
					<el-tabs type="border-card" v-model="editableTabsValue" @tab-click="resetShow()">
						<el-tab-pane label="日勤(一级)" name="1">
							<el-row>
								<el-col :span="4" v-for="(item,p) in dailyItems1" :key="p" class="flexBox_item"><span
										class="title">{{item.value}}</span><span
										:class="item.illegal===0&&item.illegalStand?'btn_red':'btn'"
										@click="godetail(item.key)">{{item.illegal===0&&item.illegalStand?item.illegalStand:item.items[0].msg_txt}}</span></el-col>
							</el-row>
						</el-tab-pane>
						<el-tab-pane label="日勤(二级)" name="2">
							<el-row>
								<el-col :span="4" v-for="(item,p) in dailyItems2" :key="p" class="flexBox_item"><span
										class="title">{{item.value}}</span><span
										:class="item.illegal===0&&item.illegalStand?'btn_red':'btn'"
										@click="godetail(item.key)">{{item.illegal===0&&item.illegalStand?item.illegalStand:item.items[0].msg_txt}}</span></el-col>
							</el-row>
						</el-tab-pane>
						<el-tab-pane label="全安(一级)" name="3">
							<el-row>
								<el-col :span="4" v-for="(item,p) in secureTypes1" :key="p" class="flexBox_item"><span
										class="title">{{item.value}}</span><span
										:class="item.illegal===0&&item.illegalStand?'btn_red':'btn'"
										@click="godetail(item.key)">{{item.illegal===0&&item.illegalStand?item.illegalStand:item.items[0].msg_txt}}</span></el-col>
							</el-row>
						</el-tab-pane>
						<el-tab-pane label="全安(二级)" name="4">
							<el-row>
								<el-col :span="4" v-for="(item,p) in secureTypes2" :key="p" class="flexBox_item"><span
										class="title">{{item.value}}</span><span
										:class="item.illegal===0&&item.illegalStand?'btn_red':'btn'"
										@click="godetail(item.key)">{{item.illegal===0&&item.illegalStand?item.illegalStand:item.items[0].msg_txt}}</span></el-col>
							</el-row>
						</el-tab-pane>
						<el-tab-pane label="操纵" name="5">
							<el-row>
								<el-col :span="4" v-for="(item,p) in controlTypes" :key="p" class="flexBox_item"><span
										class="title">{{item.value}}</span><span
										:class="item.illegal===0&&item.illegalStand?'btn_red':'btn'"
										@click="godetail(item.key)">{{item.illegal===0&&item.illegalStand?item.illegalStand:item.items[0].msg_txt}}</span></el-col>
							</el-row>
						</el-tab-pane>
						<el-tab-pane label="设备" name="6">
							<el-row>
								<el-col :span="4" v-for="(item,p) in equipmentTypes" :key="p" class="flexBox_item"><span
										class="title">{{item.value}}</span><span
										:class="item.illegal===0&&item.illegalStand?'btn_red':'btn'"
										@click="godetail(item.key)">{{item.illegal===0&&item.illegalStand?item.illegalStand:item.items[0].msg_txt}}</span></el-col>
							</el-row>
						</el-tab-pane>
						<el-tab-pane label="动车日勤" name="7">
							<el-row>
								<el-col :span="4" v-for="(item,index) in dailyCarTypes" :key="index"
									class="flexBox_item"><span class="title">{{item.value}}</span><span
										:class="item.illegal===0&&item.illegalStand?'btn_red':'btn'"
										@click="godetail(item.key)">{{item.illegal===0&&item.illegalStand?item.illegalStand:item.items[0].msg_txt}}</span></el-col>
							</el-row>
						</el-tab-pane>
						<el-tab-pane label="日勤其他项点" name="8">
							<el-row>
								<el-col :span="4" v-for="(item,index) in dailyOtherTypes" :key="index"
									class="flexBox_item"><span class="title">{{item.value}}</span><span
										:class="item.illegal===0?'btn_red':'btn'"
										@click="godetail(item.key)">{{item.illegal===0&&item.illegalStand?item.illegalStand:item.items[0].msg_txt}}</span></el-col>
							</el-row>
						</el-tab-pane>
						<el-tab-pane label="违章项点" name="9">
							<el-table :data="tableData" border style="width: 100%" :row-class-name="tableRowClassName"
								@row-click="showDesc" @row-dblclick="showDetail" max-height="300">
								<el-table-column prop="name" label="项目编码" width="180">
								</el-table-column>
								<el-table-column prop="value" label="违章/正常/记录">
								</el-table-column>
								<el-table-column prop="msg_txt" label="总体情况">
								</el-table-column>
								<el-table-column prop="degree" label="重要程度">
								</el-table-column>
								<el-table-column prop="level" label="安全级别">
								</el-table-column>
								<el-table-column prop="score" label="分数">
								</el-table-column>
								<el-table-column label="操作" fixed="right">
									<template slot-scope="scope">
										<el-button type="text" size="small"
											@click="adviceDetail(scope.row)">前往意见填写</el-button>
									</template>
								</el-table-column>
							</el-table>
						</el-tab-pane>
						<el-tab-pane label="违章详情信息" name="10">
							<el-table :data="tableData2" highlight-current-row @row-click="rowClick2" current-row-key
								border style="width: 100%" @row-dblclick="showDetail" v-if="deepShow===1"
								max-height="300">
								<el-table-column prop="name" label="项目编码" width="180">
								</el-table-column>
								<el-table-column prop="value" label="违章/正常/记录">
								</el-table-column>
								<el-table-column prop="msg_txt" label="总体情况">
								</el-table-column>
								<el-table-column prop="degree" label="重要程度">
								</el-table-column>
								<el-table-column prop="level" label="安全级别">
								</el-table-column>
								<el-table-column prop="score" label="分数">
								</el-table-column>
							</el-table>
							<el-table :data="tableData3" highlight-current-row current-row-key border
								style="width: 100%" v-if="deepShow===2" max-height="300">
								<el-table-column prop="eventItem" label="事件说明">
								</el-table-column>
								<el-table-column prop="lkjNo" label="起始行号">
								</el-table-column>
								<el-table-column prop="endNo" label="结束行号">
								</el-table-column>
								<el-table-column prop="other" label="其他">
								</el-table-column>
								<el-table-column prop="time" label="时间" width="160">
								</el-table-column>
								<el-table-column prop="kiloMeter" label="公里标">
								</el-table-column>
								<el-table-column prop="signalMachine" label="信号机">
								</el-table-column>
								<el-table-column prop="signals" label="信号">
								</el-table-column>
								<el-table-column prop="distance" label="距离">
								</el-table-column>
							</el-table>
							<el-table :data="tableData4" highlight-current-row @row-click="rowClick2" current-row-key
								border style="width: 100%" @row-dblclick="showDetail" v-if="deepShow===3"
								max-height="300">
								<el-table-column prop="name" label="项目编码" width="180">
								</el-table-column>
								<el-table-column prop="degree" label="重要程度">
								</el-table-column>
								<el-table-column prop="level" label="安全级别">
								</el-table-column>
								<el-table-column prop="score" label="分数">
								</el-table-column>
								<el-table-column prop="rqIdea" label="日勤意见">
								</el-table-column>
								<el-table-column prop="tqIdea" label="退勤情况">
								</el-table-column>
								<el-table-column label="操作" fixed="right">
									<template slot-scope="scope">
										<el-button type="text" @click="adviceForms(scope.row)">意见填写</el-button>
									</template>
								</el-table-column>
							</el-table>

							<el-dialog title="意见上报" :visible.sync="dialogFormVisible">
								<el-form>
									<el-form-item label="日勤意见" label-width="120px">
										<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}"
											placeholder="请输入日勤意见" v-model="adviceForm.rqIdea">
										</el-input>
									</el-form-item>
									<el-form-item label="退勤意见" label-width="120px">
										<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}"
											placeholder="请输入退勤意见" v-model="adviceForm.tqIdea">
										</el-input>
									</el-form-item>
								</el-form>
								<div slot="footer" class="dialog-footer">
									<el-button @click="dialogFormVisible = false">取 消</el-button>
									<el-button type="primary" @click="adviceUp">确 定</el-button>
								</div>
							</el-dialog>

						</el-tab-pane>
					</el-tabs>
				</el-col>
				<el-col :span="7">
					<el-tabs type="border-card" style="height: 370px;">
						<el-tab-pane label="项点解释">
							<p v-html="points.name"></p>
							<p v-html="points.description"></p>
						</el-tab-pane>
						<!-- <el-tab-pane label="总结项">
            <el-input
              type="textarea"
              placeholder="请输入总结项"
              v-model="textarea"
              maxlength="100"
              show-word-limit
            >
            </el-input>
            </el-tab-pane> -->
					</el-tabs>
				</el-col>
			</el-row>
		</div>
		<!-- 添加或修改对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="600px">
			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
				<el-row>
					<el-col :span="24">
						<el-form-item label="开车日期" prop="driverDate">
							<el-input v-model="form.driverDate" placeholder="请输入开车日期" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="车次" prop="trainNum">
							<el-input v-model="form.trainNum" placeholder="请输入车次" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="车型" prop="trainType">
							<el-input v-model="form.trainType" placeholder="请输入车型" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="机车号" prop="motorNum">
							<el-input v-model="form.motorNum" placeholder="请输入机车号" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="本补" prop="keHuo">
							<el-input v-model="form.keHuo" placeholder="请输入本补" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="走行" prop="walk">
							<el-input v-model="form.walk" placeholder="请输入走行" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="长度" prop="length">
							<el-input v-model="form.length" placeholder="请输入长度" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="数据交路" prop="roadNum">
							<el-input v-model="form.roadNum" placeholder="请输入数据交路" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="司机" prop="driverNum">
							<el-input v-model="form.driverNum" placeholder="请输入司机" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="司机名" prop="driverName">
							<el-input v-model="form.driverName" placeholder="请输入司机名" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="副司机" prop="assisDriverNum">
							<el-input v-model="form.assisDriverNum" placeholder="请输入副司机" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="副司机名" prop="assisDriverName">
							<el-input v-model="form.assisDriverName" placeholder="请输入副司机名" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="起点站" prop="originStation">
							<el-input v-model="form.originStation" placeholder="请输入起点站" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="终点站" prop="terminus">
							<el-input v-model="form.terminus" placeholder="请输入终点站" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="分析日期" prop="analysisDate">
							<el-input v-model="form.analysisDate" placeholder="请输入分析日期" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="分析人" prop="analysisName">
							<el-input v-model="form.analysisName" placeholder="请输入分析人" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="审核人" prop="examineName">
							<el-input v-model="form.examineName" placeholder="请输入审核人" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="文件路径" prop="filePath">
							<el-input v-model="form.filePath" placeholder="请输入文件路径" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="文件最后修改时间" prop="fileModifyTime">
							<el-input v-model="form.fileModifyTime" placeholder="请输入文件最后修改时间" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="lkj文件大小" prop="size">
							<el-input v-model="form.size" placeholder="请输入lkj文件大小" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="api调用状态" prop="apiStatus">
							<el-input v-model="form.apiStatus" placeholder="请输入api调用状态" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="lkj分析状态" prop="lkjStatus">
							<el-input v-model="form.lkjStatus" placeholder="请输入lkj分析状态" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="lkj文件名" prop="fileName">
							<el-input v-model="form.fileName" placeholder="请输入lkj文件名" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="分配状态(0未分配，1已分配)" prop="allocateStatus">
							<el-input v-model="form.allocateStatus" placeholder="请输入分配状态(0未分配，1已分配)" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="分析状态(未分析0，分析中2，已完成1)" prop="analysisStatus">
							<el-input v-model="form.analysisStatus" placeholder="请输入分析状态(未分析0，分析中2，已完成1)" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="查看进度（单位%）" prop="progress">
							<el-input v-model="form.progress" placeholder="请输入查看进度（单位%）" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="分析员ID" prop="analysisId">
							<el-input v-model="form.analysisId" placeholder="请输入分析员ID" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import axios from 'axios'
	import convert from '@/utils/convert'
	export default {
		name: 'index',
		data() {
			return {
				lkjPhaseTypes: require('./lkjPhaseTypes.json'),
				lkjProcessPhases: require('./lkjPhases.json'),
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 总条数
				total: 0,
				// 表格数据
				dataList: [],
				// 弹出层标题
				title: '',
				// 是否显示弹出层
				open: false,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					driverDate: '',
					driverName: '',
					trainNum: '',
					driverNum: '',
					trainType: '',
					originStation: '',
					motorNum: '',
					terminus: '',
				},
				columnInfos: [], // 所有列信息
				showAlwaysShowColumnInCheckbox: true,
				dynamicColumnSetting: true,
				columnVisibles: new Array(30).fill(true), //设置列可见性
				visibleIndexs: [], // 可见列的下标集合
				alwaysShowColumnIndexs: [], //总是显示的列的下标（不可隐藏的列）,列下标从 0 开始
				hidenColumnIndexs: [], //隐藏列的下标集合
				// 表单参数
				form: {},
				// 表单校验
				rules: {
					driverDate: [{
						required: true,
						message: '开车日期不能为空',
						trigger: 'blur'
					}],
					trainNum: [{
						required: true,
						message: '车次不能为空',
						trigger: 'blur'
					}],
					trainType: [{
						required: true,
						message: '车型不能为空',
						trigger: 'blur'
					}],
					motorNum: [{
						required: true,
						message: '机车号不能为空',
						trigger: 'blur'
					}],
					keHuo: [{
						required: true,
						message: '本补不能为空',
						trigger: 'blur'
					}],
					walk: [{
						required: true,
						message: '走行不能为空',
						trigger: 'blur'
					}],
					length: [{
						required: true,
						message: '长度不能为空',
						trigger: 'blur'
					}],
					roadNum: [{
						required: true,
						message: '数据交路不能为空',
						trigger: 'blur'
					}],
					driverNum: [{
						required: true,
						message: '司机不能为空',
						trigger: 'blur'
					}],
					driverName: [{
						required: true,
						message: '司机名不能为空',
						trigger: 'blur'
					}],
					assisDriverNum: [{
						required: true,
						message: '副司机不能为空',
						trigger: 'blur'
					}],
					assisDriverName: [{
						required: true,
						message: '副司机名不能为空',
						trigger: 'blur'
					}],
					originStation: [{
						required: true,
						message: '起点站不能为空',
						trigger: 'blur'
					}],
					terminus: [{
						required: true,
						message: '终点站不能为空',
						trigger: 'blur'
					}],
					analysisDate: [{
						required: true,
						message: '分析日期不能为空',
						trigger: 'blur'
					}],
					analysisName: [{
						required: true,
						message: '分析人不能为空',
						trigger: 'blur'
					}],
					examineName: [{
						required: true,
						message: '审核人不能为空',
						trigger: 'blur'
					}],
					filePath: [{
						required: true,
						message: '文件路径不能为空',
						trigger: 'blur'
					}],
					fileModifyTime: [{
						required: true,
						message: '文件最后修改时间不能为空',
						trigger: 'blur'
					}],
					size: [{
						required: true,
						message: 'lkj文件大小不能为空',
						trigger: 'blur'
					}],
					apiStatus: [{
						required: true,
						message: 'api调用状态不能为空',
						trigger: 'blur'
					}],
					lkjStatus: [{
						required: true,
						message: 'lkj分析状态不能为空',
						trigger: 'blur'
					}],
					fileName: [{
						required: true,
						message: 'lkj文件名不能为空',
						trigger: 'blur'
					}],
					allocateStatus: [{
						required: true,
						message: '分配状态(0未分配，1已分配)不能为空',
						trigger: 'blur'
					}],
					analysisStatus: [{
						required: true,
						message: '分析状态(未分析0，分析中2，已完成1)不能为空',
						trigger: 'blur'
					}],
					progress: [{
						required: true,
						message: '查看进度（单位%）不能为空',
						trigger: 'blur'
					}],
					analysisId: [{
						required: true,
						message: '分析员ID不能为空',
						trigger: 'blur'
					}]
				},
				tableDate: [],
				textarea: '',
				dailyItems1: [],
				dailyItems2: [],
				secureTypes1: [],
				secureTypes2: [],
				controlTypes: [],
				equipmentTypes: [],
				dailyCarTypes: [],
				dailyOtherTypes: [],
				tableData: [],
				tableData2: [],
				illegalStandList: [], //暂存违章数组
				editableTabsValue: '1',
				info: {},
				currentIndex: 0,
				points: {},
				baseUrl: '',
				restaurants: [],
				frankie: {},
				deepShow: 1,
				nowId: '',
				tableData3: [],
				tableData4: [],
				dialogFormVisible: false,
				advice: '',
				adviceForm: {
					type: 0,
					itemId: 0,
					recordId: '',
					phaseId: '',
					rqIdea: '',
					rqStatus: 0,
					tqIdea: '',
					tqStatus: 0
				},
				captureImage: '' //截取得图片
			};
		},
		created() {
			this.getTable();
			this.getLkjPhaseListByType()
			this.getSiji()
		},
		methods: {
			setBlur() {},
			getSiji() {
				let str = encodeURIComponent(this.queryParams.driverName)
				axios.get(`/api/ApiData/index?url=api/lkj/index/driverLike&method=GET&driver=${str}`).then(res => {
					res.data.data.forEach(item => {
						item.value = item.name
					})
					this.restaurants = res.data.data
				})
			},
			chineseToUnicode(chineseString) {
				var unicodeString = '';
				for (var i = 0; i < chineseString.length; i++) {
					var charCode = chineseString.charCodeAt(i).toString(16); // 获取字符的Unicode码点，并转为十六进制字符串
					while (charCode.length < 4) {
						charCode = '0' + charCode; // 补齐为四位，例如：'4e2' -> '04e2'
					}
					unicodeString += '\\u' + charCode; // 构建Unicode字符串
				}
				return unicodeString;
			},
			createFilter(queryString) {
				return (restaurant) => {
					return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
				};
			},
			querySearch(queryString, cb) {
				var restaurants = this.restaurants;
				var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
				// // 调用 callback 返回建议列表的数据
				cb(results);
			},
			handleSelect(item) {
				this.queryParams.driverNum = item.jobNum
			},
			init() {
				// 日勤一级项点小类
				let item1 = this.lkjProcessPhases.filter((phase) => phase.daily === 1)
				this.dailyItems1 = this.convertPhaseTypes(item1, this.lkjPhaseTypes)
				// 日勤二级项点小类
				let item2 = this.lkjProcessPhases.filter((phase) => phase.daily === 2)
				this.dailyItems2 = this.convertPhaseTypes(item2, this.lkjPhaseTypes)
				// 安全一级项点小类
				let item3 = this.lkjProcessPhases.filter((phase) => phase.secure === 1)
				this.secureTypes1 = this.convertPhaseTypes(item3, this.lkjPhaseTypes)
				// 安全二级项点小类
				let item4 = this.lkjProcessPhases.filter((phase) => phase.secure === 2)
				this.secureTypes2 = this.convertPhaseTypes(item4, this.lkjPhaseTypes)
				// 操纵项点小类
				let item5 = this.lkjProcessPhases.filter((phase) => phase.control === 1)
				this.controlTypes = this.convertPhaseTypes(item5, this.lkjPhaseTypes)
				// 设备项点小类
				let item6 = this.lkjProcessPhases.filter((phase) => phase.equipment === 1)
				this.equipmentTypes = this.convertPhaseTypes(item6, this.lkjPhaseTypes)
				// 动车日勤小类
				let item7 = this.lkjProcessPhases.filter((phase) => phase.dailyCar === 1)
				this.dailyCarTypes = this.convertPhaseTypes(item7, this.lkjPhaseTypes)
				// 日勤其他项点小类
				let item8 = this.lkjProcessPhases.filter((phase) => phase.dailyOther === 1)
				this.dailyOtherTypes = this.convertPhaseTypes(item8, this.lkjPhaseTypes)
			},
			cellDblclick(row, column, cell, event) {
				this.$router.push(`/vedioanalysis?id=${row.id}`)
			},
			rowClick2(row, column, event, index) {
				this.points = row
			},
			rowClick(row, column, event) {
				this.tableData = []
				this.illegalStandList = []
				this.info = row
				this.nowId = row.id
				this.getOne(row.id)
			},
			showDesc(row, column, event) {
				this.points = row
			},
			showDetail(row, column, event) {
				let data = {
					url: 'api/lkj/index/illegalPhase',
					method: 'GET',
					id: this.nowId,
					phaseId: row.phaseId
				}
				axios.get(
						`/api/ApiData/index?url=${data.url}&method=${data.method}&recordId=${data.id}&phaseId=${data.phaseId}`
					)
					.then(res => {
						this.tableData3 = res.data.data
					})
				this.deepShow = 2
				this.editableTabsValue = '10'
			},
			godetail(key) {
				this.tableData2 = this.lkjProcessPhases.filter(obj => obj['type'] == key)
				this.editableTabsValue = '10'
			},
			resetShow() {
				this.deepShow = 1
			},
			convertPhaseTypes: function(list, lkjPhaseTypes) {
				// 获取所有的大类编号
				const typeList = list.map((item) => item.type)
				// 去重
				const typeSet = new Set(typeList)
				const types = [...typeSet]
				// 映射结果
				const typeItems = types.map((type) => {
					const typeObj = lkjPhaseTypes.find((phaseType) => phaseType.key === type)
					const items = list.filter((item) => item.type === type)
					var sss = Object.assign({}, typeObj, {
						items
					})
					sss.illegal = 3
					sss.illegalStand = 0
					sss.nomal = 0
					sss.record = 0
					sss.items.forEach((item, k) => {
						if (this.frankie[item.phaseId]) { //在违章接口数据里
							sss.illegal = this.frankie[item.phaseId][0].illegal
							sss.illegalStand += this.frankie[item.phaseId][0].illegalStand
							sss.nomal += this.frankie[item.phaseId][0].nomal
							sss.record += this.frankie[item.phaseId][0].record
						}
					})
					return sss
				})
				return typeItems
			},
			getOne(id) {
				let data = {
					url: 'api/lkj/index/collectPhase',
					method: 'GET',
				}
				axios.get(`/api/ApiData/index?url=${data.url}&method=${data.method}&recordId=${id}`).then(res => {
					let obj = res.data.data
					this.frankie = obj
					this.lkjProcessPhases.forEach((item, index) => {
						item.recordId = id
						item.phaseId = index
						if (obj[index]) {
							switch (obj[index][0].illegal) {
								case 0:
									item.msg_txt = '违章';
									break;
								case 1:
									item.msg_txt = '未处理';
									break;
								case 2:
									item.msg_txt = '视频缺失';
									break;
								case 3:
									item.msg_txt = '正常';
									break;
								case 4:
									item.msg_txt = '记录';
									break;
								case 5:
									item.msg_txt = '提醒';
									break;
								default:
									item.msg_txt = '其它';
									break;
							}
							item.value = (obj[index][0].illegalStand) + '/' + (obj[index][0].nomal) +
								'/' +
								(obj[index][0].record)
							item.illegal = obj[index][0].illegal
							this.tableData.push(item)
						} else {
							item.value = '0/0/0'
							item.illegal = 3
							item.msg_txt = '正常';
						}
					})
					this.init()
				})
			},
			// encodeToUnicodeDecimal(str) {
			//   let encodedStr = '';
			//   for (let i = 0; i < str.length; i++) {
			//     const unicode = str.charCodeAt(i);
			//     encodedStr += `${unicode},`;
			//   }
			//   return encodedStr;
			// },
			strainer(value, type) {
				const dt = new Date(value)
				// 返回年数的四位数方法
				const y = dt.getFullYear()
				// 月份从0开始，所有要加1，如果不足两位用es6字符串方法补0
				const m = (dt.getMonth() + 1 + '').padStart(2, '0')
				const d = (dt.getDate() + '').padStart(2, '0')

				const hh = (dt.getHours() + '').padStart(2, '0')
				const mm = (dt.getMinutes() + '').padStart(2, '0')
				const ss = (dt.getSeconds() + '').padStart(2, '0')
				if (type === 'yyyy-MM-dd') {
					return `${y}-${m}-${d}`
				} else if (type === 'hh:mm') {
					return `${hh}:${mm}`
				} else if (type === 'HH:mm:ss') {
					return `${hh}:${mm}:${ss}`
				} else if (type === 'yyyy年MM月') {
					return `${y}年${m}月`
				} else {
					return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
				}
			},
			getTable() {
				let {
					driverDate,
					trainNum,
					driverNum,
					trainType,
					originStation,
					motorNum,
					terminus,
					pageNum,
					pageSize
				} = this.queryParams
				var times = ''
				if (driverDate) {
					var times = this.strainer(driverDate, 'yyyy-MM-dd')
				}
				// let str = encodeURIComponent(driverName)
				let str1 = encodeURIComponent(originStation)
				let str2 = encodeURIComponent(terminus)
				axios.get(
					`/api/ApiData/index?url=api/lkj/index/list&method=GET&video=1&pageNum=${pageNum}&pageSize=${pageSize}&driverDate=${times}&trainNum=${trainNum}&driverNum=${driverNum}&trainType=${trainType}&originStation=${str1}&motorNum=${motorNum}&terminus=${str2}`
				).then(res => {
					// axios.get(`http://192.168.0.113:8888/api/lkj/index/list?video=1&pageNum=${pageNum}&pageSize=${pageSize}&driverDate=${times}&driverName=${str}&trainNum=${trainNum}&driverNum=${driverNum}&trainType=${trainType}&originStation=${str1}&motorNum=${motorNum}&terminus=${str2}`).then(res => {
					let item = res.data.data
					this.dataList = item.rows
					this.info = item.rows[0]
					this.nowId = item.rows[0].id
					this.getOne(item.rows[0].id)
					this.total = item.total
					this.queryParams.pageNum = item.currentPage
				})
			},
			adviceDetail(row) {
				axios.get(
					`/api/ApiData/index?url=api/lkj/index/getCategories&method=GET&recordId=${row.recordId}&PhaseId=${row.type}`
				).then(res => {
					var arr = res.data.data
					arr.forEach((item, k) => {
						item.type = row.type
					})
					this.tableData4 = arr
				})
				this.deepShow = 3
				this.editableTabsValue = '10'
			},
			adviceForms(row) {
				this.adviceForm.type = row.type
				this.adviceForm.itemId = row.itemId
				this.adviceForm.recordId = row.recordId
				this.adviceForm.phaseId = row.itemId
				this.adviceForm.rqIdea = row.rqIdea
				this.adviceForm.tqIdea = row.tqIdea
				this.dialogFormVisible = true
			},
			adviceUp() {
				this.dialogFormVisible = false
				axios.get(
					`/api/ApiData/index?url=api/lkj/index/updateRqIdea&method=GET&recordId=${this.adviceForm.recordId}&phaseId=${this.adviceForm.phaseId}&rqIdea=${this.adviceForm.rqIdea}&tqIdea=${this.adviceForm.tqIdea}&rqStatus=1&tqStatus=1&status=1`
				).then(res => {
					axios.get(
						`/api/ApiData/index?url=api/lkj/index/getCategories&method=GET&recordId=${this.adviceForm.recordId}&PhaseId=${this.adviceForm.type}`
					).then(res => {
						var arr = res.data.data
						arr.forEach((item, k) => {
							item.type = row.type
						})
						this.tableData4 = arr
					})
					this.$message({
						type: 'success',
						message: '上报成功'
					});
				})
			},
			getLkjPhaseListByType() {
				const typesList = this.lkjPhaseTypes.map((type) => {
					const items = this.lkjProcessPhases.filter((phase) => phase.type === type.key)
					return Object.assign({}, type, {
						items
					})
				})
				return typesList
			},
			handleSizeChange(val) {
				this.queryParams.pageNum = 1
				this.queryParams.pageSize = val
				this.getTable()
			},
			handleCurrentChange(val) {
				this.queryParams.pageNum = val
				this.getTable()
			},
			/** 查询列表 */
			getList() {
				list(this.queryParams).then(response => {
					this.dataList = response.data.rows;
					this.total = response.data.total;
				});
			},
			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},
			// 表单重置
			reset() {
				this.form = {
					id: undefined,
					driverDate: undefined,
					trainNum: undefined,
					trainType: undefined,
					motorNum: undefined,
					keHuo: undefined,
					walk: undefined,
					length: undefined,
					roadNum: undefined,
					driverNum: undefined,
					driverName: undefined,
					assisDriverNum: undefined,
					assisDriverName: undefined,
					originStation: undefined,
					terminus: undefined,
					analysisDate: undefined,
					analysisName: undefined,
					examineName: undefined,
					filePath: undefined,
					fileModifyTime: undefined,
					size: undefined,
					apiStatus: undefined,
					lkjStatus: undefined,
					fileName: undefined,
					allocateStatus: undefined,
					analysisStatus: undefined,
					progress: undefined,
					analysisId: undefined
				};
				this.resetForm('form');
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.dataList = []
				this.getTable();
				// this.demo();
			},
			/** 重置按钮操作 */
			resetQuery(formName) {
				this.$refs[formName].resetFields();
				// this.resetForm('queryForm');
				this.handleQuery();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.id);
				this.single = selection.length !== 1;
				this.multiple = !selection.length;
			},
			/** 新增按钮操作 */
			handleAdd() {
				this.reset();
				this.open = true;
				this.title = '添加';
			},
			/** 修改按钮操作 */
			handleUpdate(row) {
				this.reset();
				const id = row.id || this.ids;
				get(id).then(response => {
					this.form = response.data;
					this.open = true;
					this.title = '修改';
				});
			},

			/** 提交按钮 */
			submitForm: function() {
				this.$refs['form'].validate(valid => {
					if (valid) {
						if (this.form.id !== undefined) {
							update(this.form).then(response => {
								if (response.code === 0) {
									this.msgSuccess('修改成功');
									this.open = false;
									this.getList();
								} else {
									this.msgError(response.msg);
								}
							});
						} else {
							add(this.form).then(response => {
								if (response.code === 0) {
									this.msgSuccess('新增成功');
									this.open = false;
									this.getList();
								} else {
									this.msgError(response.msg);
								}
							});
						}
					}
				});
			},
			/** 删除按钮操作 */
			handleDelete(row) {
				const ids = row.id || this.ids;
				this.$confirm('是否确认删除ID为"' + ids + '"的数据项?', '警告', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(function() {
						return remove(ids);
					})
					.then(() => {
						this.getList();
						this.msgSuccess('删除成功');
					})
					.catch(function() {});
			},

			oprColumns(indexs, isShow) {
				let self = this;
				indexs.forEach(index => {
					self.$set(self.columnVisibles, index, isShow);
				});
			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (row.illegal === 0) {
					return 'warning-row';
				} else {
					return 'success-row';
				}
			}
		},
		mounted() {
			let self = this;
			if (self.$refs.pageTable.$slots.default) {
				let columnIndex = 0;
				self.$refs.pageTable.$slots.default.forEach((columnIns, index) => {
					if (columnIns.componentOptions === undefined) {
						return;
					}
					let props = columnIns.componentOptions.propsData;
					if (
						props.prop === undefined ||
						props.type === 'selection' ||
						props.type === 'index'
					) {
						return;
					}
					// 保存所有列的信息
					let label = props.label;
					let colName = props.prop;
					self.columnInfos.push({
						label: label,
						colName: colName,
						index: columnIndex,
						disabled: false
					});
					// 记录初始展示的列的下标
					if (self.hidenColumnIndexs.indexOf(columnIndex) === -1) {
						self.visibleIndexs.push(columnIndex);
					}
					columnIndex++;
				});
				// 处理总是显示的列（不可隐藏的列）
				self.alwaysShowColumnIndexs.forEach(
					index => (self.columnInfos[index].disabled = true)
				);
				// 处理初始隐藏的列
				self.oprColumns(self.hidenColumnIndexs, false);
			}
		},
		// beforeUpdate() {
		//   let self = this;
		//   self.$nextTick(_ => {
		//     self.$refs.pageTable.doLayout();
		//   });
		// },
		watch: {
			visibleIndexs(newValue, oldValue) {
				let self = this;
				let willHideIndexs = [],
					willShowIndexs = [];
				willShowIndexs = newValue.filter(index => {
					return oldValue.indexOf(index) === -1;
				});
				willHideIndexs = oldValue.filter(index => {
					return newValue.indexOf(index) === -1;
				});
				self.oprColumns(willShowIndexs, true);
				self.oprColumns(willHideIndexs, false);
			}
		}
	};
</script>
<style>
	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}

	.el-pagination {
		text-align: center;
		margin-top: 10px;
	}

	.footer {
		border: 1px solid #ccc;
		margin-top: 10px;
	}

	.analysis_info {
		display: flex;
		padding: 10px;
	}

	.analysis_info span {
		margin-right: 20px;
		font-size: 15px;
		color: blue;
		font-weight: 700;
	}

	.footer_item {
		background: #d4dff3;
	}

	.flexBox {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.flexBox_item {
		/* width: 24%; */
		display: flex;
		justify-content: space-between;
		margin: 5px 0;
		align-items: center;
		padding-left: 20px;
	}

	.flexBox_item .title {
		font-size: 12px;
		color: #000;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 65px;
	}

	.el-date-editor.el-input {
		width: 200px;
		height: 30px;
	}

	/deep/.el-input--prefix .el-input__inner {
		height: 30px;
		line-height: 30px;
	}

	.flexBox_item .btn {
		background: #fff;
		font-size: 12px;
		color: #000;
		padding: 3px 10px;
		border-radius: 10px;
		border: 1px solid #ccc;
		width: 25px;
	}

	.flexBox_item .btn_red {
		background: orangered;
		font-size: 12px;
		color: white;
		padding: 3px 10px;
		border-radius: 10px;
		border: 1px solid #ccc;
		width: 25px;
	}

	/deep/.el-tabs--border-card {
		box-shadow: 0 0 black;
	}

	/deep/.el-tabs__content {
		background: #d4dff3;
	}

	::v-deep.success-row {
		background: #409EFF;
	}

	.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
		background: #409EFF !important;
		color: #fff;
	}
</style>